<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="6">
        <stat-card title="总考试数" :value="statData.totalExams" icon="exam" />
      </el-col>
      <el-col :span="6">
        <stat-card title="已发布" :value="statData.publishedExams" icon="published" />
      </el-col>
      <el-col :span="6">
        <stat-card title="进行中" :value="statData.ongoingExams" icon="ongoing" />
      </el-col>
      <el-col :span="6">
        <stat-card title="草稿" :value="statData.draftExams" icon="draft" />
      </el-col>
    </el-row>

    <el-row :gutter="20" class="mt-20">
      <el-col :span="12">
        <chart-card title="考试类型分布">
          <pie-chart :chart-data="typeChartData" />
        </chart-card>
      </el-col>
      <el-col :span="12">
        <chart-card title="考试状态分布">
          <pie-chart :chart-data="statusChartData" />
        </chart-card>
      </el-col>
    </el-row>

    <el-row class="mt-20">
      <el-col :span="24">
        <chart-card title="考试时长分布">
          <bar-chart :chart-data="durationChartData" />
        </chart-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getExamStatistics } from '@/api/stat/stat'
import StatCard from './StatCard'
import ChartCard from './ChartCard'
import PieChart from './PieChart'
import BarChart from './BarChart'

export default {
  name: 'ExamStatPanel',
  components: {
    StatCard,
    ChartCard,
    PieChart,
    BarChart
  },
  data() {
    return {
      statData: {
        totalExams: 0,
        publishedExams: 0,
        ongoingExams: 0,
        draftExams: 0,
        typeDistribution: [],
        statusDistribution: [],
        durationDistribution: []
      },
      loading: false
    }
  },
  computed: {
    typeChartData() {
      return {
        columns: ['name', 'value'],
        rows: this.statData.typeDistribution
      }
    },
    statusChartData() {
      return {
        columns: ['name', 'value'],
        rows: this.statData.statusDistribution
      }
    },
    durationChartData() {
      return {
        columns: ['name', 'value'],
        rows: this.statData.durationDistribution
      }
    }
  },
  created() {
    this.loadData()
  },
  methods: {
    loadData() {
      this.loading = true
      getExamStatistics().then(response => {
        this.statData = response.data
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    }
  }
}
</script>
